import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Search, Plus } from 'lucide-react';

const products = [
  {
    id: 1,
    name: '产品 A',
    category: '电子产品',
    price: '¥999',
    stock: 120,
    status: '在售',
  },
  {
    id: 2,
    name: '产品 B',
    category: '服装',
    price: '¥299',
    stock: 50,
    status: '在售',
  },
  {
    id: 3,
    name: '产品 C',
    category: '图书',
    price: '¥59',
    stock: 0,
    status: '缺货',
  },
  {
    id: 4,
    name: '产品 D',
    category: '食品',
    price: '¥39',
    stock: 200,
    status: '在售',
  },
  {
    id: 5,
    name: '产品 E',
    category: '电子产品',
    price: '¥1,299',
    stock: 30,
    status: '在售',
  },
];

export default function Products() {
  return (
    <div className="space-y-6">
      {/* Page header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">产品管理</h1>
          <p className="text-muted-foreground">管理您的产品库存和信息</p>
        </div>
        <Button>
          <Plus className="mr-2 h-4 w-4" />
          添加产品
        </Button>
      </div>

      {/* Search bar */}
      <Card>
        <CardContent className="pt-6">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            <Input placeholder="搜索产品..." className="pl-9" />
          </div>
        </CardContent>
      </Card>

      {/* Products grid */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {products.map((product) => (
          <Card key={product.id}>
            <CardHeader>
              <div className="flex items-start justify-between">
                <CardTitle className="text-lg">{product.name}</CardTitle>
                <Badge variant={product.status === '在售' ? 'default' : 'secondary'}>
                  {product.status}
                </Badge>
              </div>
            </CardHeader>
            <CardContent className="space-y-2">
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">分类:</span>
                <span>{product.category}</span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">价格:</span>
                <span className="font-medium">{product.price}</span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">库存:</span>
                <span className={product.stock === 0 ? 'text-red-500' : ''}>
                  {product.stock}
                </span>
              </div>
              <div className="pt-2">
                <Button variant="outline" className="w-full">
                  查看详情
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}

